<template>
    <checkorder-status-bar
        class="status-bar"
        :statusSpaceStyle="{ fontSize: '15px'}"
        :orderDetial="maintaincheckorder.detail"> </checkorder-status-bar>
    <div class="maintaincheck-info">
        <line-cell
            align="space-between"
            :listSetProps="listprops"
            :lineBoxStyle="{ paddingTop: '14px', paddingBottom: '14px', marginBottom: '0' }"
            :lineLeftStyle="{ fontSize: '17px', color: '#000'}"
            :lineRightStyle="{ fontSize: '17px', color: 'rgba(0,0,0,0.60)', width: 'calc(100% - 80px)', textAlign: 'right' }"
            :listData="maintaincheckorder && maintaincheckorder.detail">
        </line-cell>
    </div>
    <div class="maintaincheck-info-remark">
        <div class="remark-title">{{ $t('wp-bei-zhu') }}</div>
        <div class="remark-value">{{maintaincheckorder.detail.remark}}</div>
    </div>
    <div
        v-if="steps.length > 0"
        class="maintaincheck-step">
        <div class="step-title-box">
            <div class="step-title">{{ $st("wp_Progress") }}</div>
            <collapse-button
                class="collapse-button"
                v-model:isExpand="isExpendSteps"></collapse-button>
        </div>
        <step-card
            :steps="steps"
            :height="height"
            class="step-card-box"></step-card>
    </div>
    <div class="maintaincheck-check-box">
        <div class="check-title">{{ $t('wp-she-bei-dian-jian') }}</div>
        <device-item
            :maintainworkorderid="maintaincheckorder.orderid"
            :maintaindevices="maintaincheckorder.detail.maintaindevices"></device-item>
    </div>
    <div
        v-if="isFinishBtnShow"
        class="button-div-fixed">
        <van-button
            class="submit-button"
            @click="finishOrder">{{ $t('wp-jie-dan') }}</van-button>
    </div>
    <div
        v-if="isCheckBtnShow"
        class="button-div-fixed">
        <van-button
            class="submit-button"
            @click="checkOrder">{{ $t('wp-wan-cheng-yan-shou') }}</van-button>
    </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { selfI18n } from '@/i18n/index';
import moment from 'moment';
import { showConfirm, showSuccess } from '@/util/MessageDeal';
import { useStore } from 'vuex';
import { ref, onMounted, reactive, toRefs, watch, computed } from 'vue';
import StepCard from './StepCard.vue';
import DeviceItem from './DeviceItem.vue';
import LineCell from '@/components/_common/LineCell.vue';
import CollapseButton from '@/components/_common/CollapseButton.vue';
import CheckorderStatusBar from '@/components/maintenance_control/common/CheckorderStatusBar.vue';
import MaintaincheckorderDetailSetup from '@/setup/maintaincheckorder/MaintaincheckorderDetailSetup';
import useMaintaincheckDataSetup from '@/setup/maintaincheckorder/MaintaincheckorderDataSetup';
import { examRpairOrderAction } from '@/setup/maintaincheckorder/FunctionForUserExam';
import { actions } from '@/consts/maintaincheckorder.consts';

export default {
    components: {
        CheckorderStatusBar,
        LineCell,
        CollapseButton,
        StepCard,
        DeviceItem
    },

    setup () {
        const {
            setOrderId,
            queryMaintaincheckorderDetail,
            maintaincheckorder,
            getMaintainchecklog,
            postMaintainworkorderFinish,
            postMaintainworkorderAccepting
        } = MaintaincheckorderDetailSetup();
        const {
            operatorcheckDescFormat,
            operatetypeformat
        } = useMaintaincheckDataSetup();

        const devicecheck = ref(null);

        const store = useStore();
        const userinfo = store.state.userinfo;

        const router = useRouter();

        const state = reactive({
            listprops: [{
                id: 'sendordertime',
                label: selfI18n('wp-pai-dan-ri-qi'),
                formatter: (detail) => {
                    return moment(detail.sendordertime).format('YYYY-MM-DD');
                }
            }, {
                id: 'maintaintimestring',
                label: selfI18n('wp-wei-jian-ri-qi')
            }, {
                id: 'address',
                label: selfI18n('wp-wei-jian-di-zhi')
            }],
            isExpendSteps: false,
            steps: [],
            height: '79px'
        });

        watch(() => state.isExpendSteps, (newVal, oldVal) => {
            if (newVal) {
                // 展开
                state.height = 'auto';
            } else if (!newVal && state.steps.length !== 0) {
                // 收缩
                state.height = '79px';
            }
        });

        // 是否显示结单
        const isFinishBtnShow = computed(() => {
            const {
                // 结单
                endorder
            } = actions;
            return examRpairOrderAction(endorder, maintaincheckorder.detail, userinfo);
        });
        // 是否显示验收
        const isCheckBtnShow = computed(() => {
            const {
                // 结单
                check
            } = actions;
            return examRpairOrderAction(check, maintaincheckorder.detail, userinfo);
        });

        const finishOrder = () => {
            showConfirm(selfI18n('wp-shi-fou-jie-dan'), () => {
                postMaintainworkorderFinish().then((data) => {
                    showSuccess(selfI18n('wp-cao-zuo-cheng-gong'));
                    router.push({
                        path: '/checkordersuccess',
                        query: {
                            type: 'finish',
                            maintainworkorderid: maintaincheckorder.orderid
                        }
                    });
                });
            });
        };

        const checkOrder = () => {
            showConfirm(selfI18n('wp-shi-fou-wan-cheng-yan-shou'), () => {
                postMaintainworkorderAccepting().then((data) => {
                    showSuccess(selfI18n('wp-cao-zuo-cheng-gong'));
                    router.push({
                        path: '/checkordersuccess',
                        query: {
                            type: 'check',
                            maintainworkorderid: maintaincheckorder.orderid
                        }
                    });
                });
            });
        };

        // 获取节点信息
        const getChecklog = () => {
            getMaintainchecklog().then((data) => {
                state.steps = data.value.map((item) => {
                    item.time = moment(item.operatetime).format('YYYY-MM-DD HH:mm:ss');
                    item.status = operatetypeformat(item);
                    item.desc = operatorcheckDescFormat(item);
                    return item;
                });
                state.steps.reverse();
            });
        };

        onMounted(() => {
            setOrderId();
            queryMaintaincheckorderDetail(() => {});
            getChecklog();
        });

        return {
            ...toRefs(state),
            maintaincheckorder,
            devicecheck,
            operatorcheckDescFormat,
            operatetypeformat,
            isFinishBtnShow,
            isCheckBtnShow,
            finishOrder,
            checkOrder
        };
    }
};
</script>

<style lang="scss" scoped>
.status-bar {
    padding: 9px 15px 8px;
    background-color: #fff;
    margin-bottom: 10px;
}
.maintaincheck-info {
    background-color: #fff;
    padding: 0 15px 0;
    margin-bottom: 10px;
}
.maintaincheck-info-remark {
    padding: 10px 15px 12px;
    background-color: #fff;
    margin-bottom: 15px;
    .remark-title {
        margin-bottom: 10px;
        font-size: 17px;
    }
    .remark-value {
        font-size: 15px;
        color: rgba(0,0,0,0.40);
    }
}
.maintaincheck-step {
    margin-bottom: 15px;
    .step-title-box {
        display: flex;
        justify-content: space-between;
        padding: 0 15px 7px;
        .step-title {
            color: rgba(0,0,0,0.45);
            font-size: 13px;
        }
        .collapse-button {
            font-size: 13px;
        }
    }
    .step-card-box {
        padding: 14px 15px 14px;
        background-color: #fff;
    }
}
.maintaincheck-check-box {
    padding-bottom: 63px;
    .check-title {
        color: rgba(0,0,0,0.45);
        font-size: 13px;
        padding-left: 15px;
        padding-bottom: 8px;
    }
}
.button-div-fixed{
    position:fixed;
    height: 53px;
    padding: 7px 15px 6px;
    box-sizing: border-box;
    bottom: 0;
    background-color: #fff;
    .submit-button{
        width: calc(100vw - 30px);
        height: 40px;
        font-size: 18px;
        opacity: 1;
        background: #1890ff;
        border-radius: 4px;
        vertical-align: middle;
        text-align: center;
        color: #ffffff;
    }
}
</style>
